<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">

    <meta name="description" content="Violate Responsive Admin Template">
    <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">

    <title>Super Admin Responsive Template</title>

    <!-- CSS -->
    <link href="/static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link href="/static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet">
    <link href="/static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
    <link href="/static/css/form.css" th:href="@{/css/form.css}" rel="stylesheet">
    <link href="/static/css/calendar.css" th:href="@{/css/calendar.css}" rel="stylesheet">
    <link href="/static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet">
    <link href="/static/css/icons.css" th:href="@{/css/icons.css}" rel="stylesheet">
    <link href="/static/css/generics.css" th:href="@{/css/generics.css}" rel="stylesheet">
    <link href="/static/css/media-player.css" th:href="@{/css/media-player.css}" rel="stylesheet">

</head>
<body id="skin-blur-violate">
<!-- top-menu -->
<div th:replace="commons/top-menu :: #header"></div>

<div class="clearfix"></div>

<section id="main" class="p-relative" role="main">

    <!-- Sidebar -->
    <aside th:replace="commons/side-menu :: #sidebar(activeUri='user/list')"></aside>

    <!-- Content -->
    <section id="content" class="container">


        <!-- Breadcrumb -->
        <ol class="breadcrumb hidden-xs">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li class="active">Data</li>
        </ol>

        <h4 class="page-title">用户管理</h4>

        <!-- Messages Drawer -->
        <div th:replace="commons/top-menu::#messages"></div>

        <!-- Notification Drawer -->
        <div th:replace="commons/top-menu::#notifications"></div>

        <!-- Table Striped -->
        <div class="block-area" id="tableStriped">
            <!--<h3 class="block-title">Table Striped</h3>-->
            <h3>
                <a class="btn btn-sm btn-success" href="/user/pro" th:href="@{/user/pro}">添加用户</a>
            </h3>
            <div class="table-responsive overflow">
                <table class="tile table table-bordered table-striped table-hover">
                    <thead>
                    <tr>
                        <th>No.</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>登录名</th>
                        <th>性别</th>
                        <th>邮箱</th>
                        <th>权限</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="user:${users}">
                        <td th:text="${user.id}"></td>
                        <td th:text="${user.createTime}"></td>
                        <td th:text="${user.updateTime}"></td>
                        <td th:text="${user.username}"></td>
                        <td th:text="${user.sex}==0?'女':'男'"></td>
                        <td th:text="${user.email}"></td>
                        <td th:text="${user.roleId}"></td>
                        <td>
                            <a id="editProBtn" class="btn btn-sm btn-primary"
                               th:href="@{/user/pro(id=${user.id})}">编辑</a>
                            <button id="delProBtn" th:attr="delProUri=@{/user/del(id=${user.id})}"
                                    class="btn btn-sm btn-danger delProBtn">删除
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <form id="delPro" method="post">
                    <input type="hidden" name="_method" value="delete">
                </form>
            </div>
        </div>

        <!-- Chat -->
        <div th:replace="commons/components::#chat"></div>
    </section>
    <br/><br/>
</section>

<!-- Javascript Libraries -->
<!-- jQuery -->
<script src="/static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script> <!-- jQuery Library -->

<!-- Bootstrap -->
<script src="/static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>

<!-- UX -->
<script src="/static/js/scroll.min.js" th:src="@{/js/scroll.min.js}"></script> <!-- Custom Scrollbar -->

<!-- Other -->
<script src="/static/js/calendar.min.js" th:src="@{/js/calendar.min.js}"></script> <!-- Calendar -->
<script src="/static/js/feeds.min.js" th:src="@{/js/feeds.min.js}"></script> <!-- News Feeds -->


<!-- All JS functions -->
<script src="/static/js/functions.js" th:src="@{/js/functions.js}"></script>

<script>
    $(".delProBtn").click(function () {
        $("#delPro").attr("action", $(this).attr("delProUri")).submit();
        return false;
    });
</script>
</body>
</html>

